<!DOCTYPE html>
<html lang="en" style="height:100%">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>添加好友</title>

    <link rel="stylesheet" type="text/css" href="../../css/api.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/aui.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/yzl.css"/>
    <link rel="stylesheet" href="../../css/weui.css">
    <link rel="stylesheet" href="../../css/jQuery_WeUI.css">
    <style>
    *{
      -webkit-box-sizing: inherit;
              box-sizing: inherit;
    }
    .top-container{
      -webkit-box-sizing: border-box;
              box-sizing: border-box;
    }
    .aui-list .wechat-avatar {
      width: 3rem;
    }
    .wechat-avatar, .wechat-avatar > img {
      border-radius: 8px;
    }
    .aui-list .aui-list-item-text img {
      width: 14px;
      height: 14px;
    }
    .aui-list .aui-list-item-text {
      -webkit-justify-content: flex-start;
      justify-content: flex-start;
    }
    .aui-list .aui-list-item-right {
      right: 20px;
      position: fixed;
    }
    .aui-list .aui-list-item-title {
      font-size: 0.9rem;
      position: relative;
      max-width: 100%;
      color: #212121;
    }
    .aui-list {
      border-top: none;
    }
    @media screen and (-webkit-min-device-pixel-ratio: 1.5) {
      .aui-list {
        border: none;
        background-size: 100% 0px;
      }
    }
    </style>

</head>
<body style="height:100%;">
<div id="blank" class="header">
    <div v-back.tapmode class="back"></div>
    <span class="title">添加好友</span>
</div>
<div id="app"  class="container"  style="padding-top:60px;">
  <div class="weui-search-bar" id="searchBar">
    <form class="weui-search-bar__form" onsubmit="return searchKey()">
      <div class="weui-search-bar__box">
        <i class="weui-icon-search"></i>
        <input type="search" class="weui-search-bar__input" id="searchInput" placeholder="搜索" required="">
        <a href="javascript:" class="weui-icon-clear" id="searchClear"></a>
      </div>
      <label class="weui-search-bar__label" id="searchText">
        <i class="weui-icon-search"></i>
        <span>搜索</span>
      </label>
    </form>
    <a href="javascript:" class="weui-search-bar__cancel-btn" id="searchCancel">取消</a>
  </div>
  <div class="aui-content aui-margin-b-15" id="app" v-cloak>
    <ul class="aui-list aui-media-list" >
      <li  class="aui-list-item aui-list-item-middle" tapmode v-myclick="[item.member_id, checkmember]" v-for="(item, index) in lists">
          <div class="aui-media-list-item-inner" >
              <div class="aui-list-item-media wechat-avatar">
                <img v-image-resize="{src:item.portrait?item.portrait:'../res/tx00.jpg'}"/>
              </div>
              <div class="aui-list-item-inner">
                  <div class="aui-list-item-text">
                      <div class="aui-list-item-title">{{item.nickname}}</div>
                  </div>
                  <div class="aui-list-item-text aui-font-size-12">{{item.cow}}头奶牛</div>
              </div>
          </div>
      </li>
    </ul>
    <div style="margin-top:60px" v-show="lists.length==0"><img v-src="'../../image/empty.png'" style="margin:0 auto"></div>

  </div>
</div>
</body>
<script src="../../script/api.js"></script>
<script src="../../script/vue.js"></script>
<script src="../../script/app.js"></script>
<script src="../../script/common.js"></script>
<script src="../../script/url.js"></script>
<script type="text/javascript" src="../../script/jquery.js"></script>
<script src="../../script/jQuery_WeUI.js"></script>
<script>

    var user;
    var vm;
    apiready = function () {
        setBSImg();
        new Vue({
            el: '#blank'
        });
        initApp();
        addListeners();
    };

    function initApp() {
        vm = new Vue({
            el: '#app',
            data: {
                imgPath:'../../image/',
                page: 1,
                lists:[],
                BSImg: {
                    big: Vue.BSImg == 'big',
                    small: Vue.BSImg == 'small'
                },
            },
            computed:{
            },
            methods:{
              searchKey:function(){
                var key = document.getElementById('searchInput').value;
                showProgress();
                this.page = 1;
                var that = this;
                var params = {
                    page: this.page,
                    keyword: key,
                    member_id: getPrefs('member_id'),
                };
                if (this.keyword) {
                    var callback = function (ret) {
                        this.lists = ret.content;
                        api.hideProgress();
                    };
                    pinet.post(URL.searchMember, params, callback);
                } else {
                    hideProgress();
                }
              },
              checkmember:function(member_id){
                api.openWin({
                  reload : true,
                  name : 'member_info',
                  url : 'member_info.html',
                  vScrollBarEnabled : false,
                  pageParam : {
                    uid : member_id,
                    from_type:1
                  }
                });
              },
            }
        });
    }

    function searchKey() {
    var key = document.getElementById('searchInput').value;
    var data = {
        member_id: getPrefs('member_id'),
        keywords: key
    };
    var callback = function (ret) {
        vm.lists = ret.content;
    };
    pinet.post(URL.searchMember, data, callback);
    return false;
    }

    function addListeners() {
        api.addEventListener({
            name: 'viewappear'
        }, function () {
            onPageStart();
        });

        api.addEventListener({
            name: 'viewdisappear'
        }, function () {
            onPageEnd();
        });

        api.addEventListener({
            name: 'keyback'
        }, function () {
            onPageEnd();
            api.closeWin();
        });
    }



</script>
</html>
